<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D earth</title>
</head>
<body>
  <!-- html5 画布 绘制 -->
  <canvas id="webglcanvas"></canvas>
  <script>
  // DOM  3D 绘制的容器 
  const canvas = document.getElementById('webglcanvas')
  // 绘制的上下文 2D  su7 webgl 3D  
  const ctx = canvas.getContext('2d')
  // 调用绘制API 
  ctx.beginPath();
  // 圆心
  let x = canvas.width / 2;
  let y = canvas.height / 2;
  let radius = 70;
  let startAngle = 30;
  let endAngle = Math.PI;
  let counterClickwise = false;

  ctx.arc(x, y, radius, startAngle, endAngle, 
  counterClickwise);

  ctx.fillStyle = 'green';
  ctx.stokeStyle = 'blue';
  ctx.lineWidth = 5;

  ctx.fill();
  ctx.stroke();

  ctx.closePath();




  </script>
</body>
</html>